<template>
  <div class="cropper-app">
    <div class="list-img-box">
      <div class="upload-btn" @click="uploadPicture">
        <img :src="userStore.bustTemp" />
      </div>
    </div>
    <!-- 剪裁组件弹窗 -->
    <el-dialog title="头像上传" v-model="dialogVisible" width="950px" center>
      <picture-cropper @finish="handleclose" @store="userStore"></picture-cropper>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import pictureCropper from './picture-cropper.vue'
import useUserStore from '@/store/user/user'

//从userstore获取截取后的图片信息
const userStore = useUserStore()

//裁剪对话框是否显示
const dialogVisible = ref(false)

//是否有图片
const hasImg = ref(false)
//图片设置
function uploadPicture() {
  dialogVisible.value = true
}
const handleclose = () => {
  dialogVisible.value = false
  hasImg.value = true
}
</script>
<style lang="less" scoped>
.cropper-app {
  .list-img-box {
    .upload-btn {
      border-radius: 50%;
      img {
        height: 150px;
        width: 150px;
      }
    }
  }
}

.upload-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  background: url('@/assets/img/User.png') no-repeat 50%;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 1px solid #cccccc;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 0 1px #cccccc;
}
.upload-btn:hover {
  border: 1px solid #69b7ed;
}
</style>
